<script setup lang='ts'>
  import { reactive, ref, nextTick } from 'vue';
  import { adminApi } from '@/api/controller';
  import { Toastloading, ToastSuccess } from '@/utils/public';
  import { getPassword } from '@/utils/loginPassWord';
  const $emit = defineEmits(['updateList'])
  const dataForm = ref();
  const formLabelWidth = '100px';
  const action = reactive({
    dialogFormVisible:false,
    formTitle:'',
    roles:[] as any[],
    dialogStatus:''
  })
  const form = reactive({
    id:0,
    name:'',
    password:'',
    checkedCities:[],
    password_confirmation:'',
  })
  const formRules = {
    name: [
      { required: true, trigger: "blur", message: '请输入正确的用户名' },
    ],
    passWordNum: [
      {
        required: true,
        trigger: "blur",
        validator: (rule:any, value:any, callback:any) => {
          if (!form.password) {
            callback(new Error("请输入密码"));
          } else if (form.password.length < 5) {
            callback(new Error("密码不能小于5位"));
          } else {
            callback();
          }
        },
      }],
    passWordNumTwo: [
      {
        required: true,
        trigger: "blur",
        validator: (rule:any, value:any, callback:any) => {
          if (!form.password_confirmation) {
            callback(new Error("请再次输入密码"));
          } else if (
            form.password_confirmation !== form.password
          ) {
            callback(new Error("两次输入密码不一致!"));
          } else {
            callback();
          }
        },
      },
    ],
    checkedCities: [
      {
        required: true,
        trigger: "blur",
        validator: (rule:any, value:any, callback:any) => {
          if (form.checkedCities.length <= 0) {
            callback(new Error("角色不可为空!"));
          } else {
            callback();
          }
        },
      },
    ],
  }
  const handleCheckedCitiesChange = ()=> {

  }
  const handlesubmit = ()=> {
    dataForm.value.validate((valid: any)=>{
      if(valid) {
        const { id=0,name='',password='', password_confirmation='', checkedCities=[] } = form
        const formQuery = {
          id,
          name,
          checkedCities,
          password:getPassword(password),
          password_confirmation:getPassword(password_confirmation),
        }
        const loading = Toastloading();
        if(id) {
          adminApi.updateAdmin(id,formQuery).then((response) => {
            ToastSuccess('修改成功')
            loading.close();
            closeDialog();
          }).catch(() => {
            loading.close();
          });
        }else {
          adminApi.addAdmin(formQuery).then((response) => {
            ToastSuccess('新增成功')
            loading.close();
            closeDialog();
          }).catch(() => {
            loading.close();
          });
        }
      }
    })
  }
  const openDialog = (query:any = {})=> {
    action.dialogFormVisible = true;
    let {
      id = 0,
      roles = [],
      roleslist = [],
      name = '',
      password = '',
      password_confirmation = ''
     } = query;
    
    action.roles = roleslist;
    action.formTitle = id?'新增管理员':'编辑管理员';
    if(id) {
      let checkedCities = roles.map((res: { id: any; })=>res.id)
      Object.assign(form,{
        id,
        name,
        password,
        checkedCities,
        password_confirmation,
      })
    }
  }
  const closeDialog = ()=> {
    $emit('updateList')
    Object.assign(form,{
      id:0,
      name:'',
      password:'',
      checkedCities:[],
      password_confirmation:'',

    })
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false;
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      v-model="action.dialogFormVisible"
      :title="action.formTitle"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
    >
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item :label-width="formLabelWidth" label="管理员" prop="name">
          <el-input v-model="form.name" auto-complete="off" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="密码" :prop="form.id?'':'passWordNum'">
          <el-input
            v-model="form.password"
            type="password"
            auto-complete="off"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="确认密码" :prop="form.id?'':'passWordNumTwo'">
          <el-input
            v-model="form.password_confirmation"
            type="password"
            auto-complete="off"
          />
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="角色"
          prop="checkedCities"
        >
          <el-checkbox-group
            v-model="form.checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="roles in action.roles"
              :label="roles.id"
              :key="roles.id"
              >{{ roles.desc }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button
          type="primary"
          @click="handlesubmit"
          >确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang='scss' scoped>
  
</style>